<template>
	<div class="header_side-bar">
		<iv-drawer placement="left" width="70%" :closable="false" v-model="show">
			<!-- 头部 -->
			<div class="header_side-bar_top">
				<img class="header_side-bar_top-cover" :src="cover" />
				<div class="header_side-bar_top-info">
					<h1 class="header_side-bar_top-info_nickname">{{ nickname }}</h1>
					<h2 class="header_side-bar_top-info_motto">{{ motto }}</h2>
				</div>
			</div>
			<!-- 菜单栏 -->
			<ul class="header_side-bar_content">
				<li class="header_side-bar_content-menu" v-for="(item, _index) in menus" :key="_index" @click="menuHandler(_index)">
					<!-- 栏目 -->
					<div v-if="item.type === 0" class="header_side-bar_content-menu_column"
					 :class="{ 'header_side-bar_content-active': menuActive === _index }">
						<p class="header_side-bar_content-menu_column-title">
							<iv-icon :type="item.icon"></iv-icon>
							<span>{{ $t('system.menu.' + item.key) }}</span>
							<router-link :to="item.to">{{ $t('system.btn.more') }}</router-link>
						</p>
						<transition name="fade-tag">
							<div v-if="menuActive === _index && menuTags.length > 0" class="header_side-bar_content-menu_column-tag">
								<iv-tag v-for="(item, _index) in menuTags" :key="item.id"
								 :class="{ 'header_side-bar_content-menu_column-tag_active': menuTagActive === _index }">
									<span @click="menuTagHandler(_index)">
										<router-link :to="item.to">{{ item.name }}</router-link>
									</span>
								</iv-tag>
							</div>
						</transition>
					</div>
					<!-- 页面按钮 -->
					<router-link v-if="item.type === 1"
					 class="header_side-bar_content-menu_column header_side-bar_content-menu_btn" :to="item.to">
						<iv-icon :type="item.icon"></iv-icon>
						<span>{{ $t('system.menu.' + item.key) }}</span>
					</router-link>
					<!-- 外链按钮 -->
					<a v-if="item.type === 2"
					 class="header_side-bar_content-menu_column header_side-bar_content-menu_btn" :href="item.to">
						<iv-icon :type="item.icon"></iv-icon>
						<span>{{ $t('system.menu.' + item.key) }}</span>
					</a>
				</li>
			</ul>
			<!-- 底部 -->
			<div class="header_side-bar_bottom" v-if="!this.v_user_login" @click="login">{{ $t('system.btn.login') }}</div>
			<div class="header_side-bar_bottom" v-if="this.v_user_login" @click="logout">{{ $t('system.btn.logout') }}</div>
		</iv-drawer>
	</div>
</template>

<script>
export default {
	props: {},
	data() {
		return {
			show: false,
			menus: this.$store.getters.system_myNavMenus,
			menuActive: -1,
			menuTags: [],
			menuTagActive: -1
		};
	},
	created() {
	},
	computed: {
		cover: {
			get() {
				let user_cover = this.$store.getters.user_cover;
				if (user_cover) {
					return user_cover;
				}
				let conver = this.$store.getters.system_cover;
				if (!conver) {
					conver = require('@/assets/img/cover.jpg');
				}
				return conver;
			}
		},
		nickname: {
			get() {
				let user_nickName = this.$store.getters.user_nickName;
				if (user_nickName) {
					return user_nickName;
				}
				return this.$store.getters.system_title;
			}
		},
		motto: {
			get() {
				let user_motto = this.$store.getters.user_motto;
				if (user_motto) {
					return user_motto;
				}
				return this.$store.getters.system_motto;
			}
		}
	},
	methods: {
		initData() {
			this.menuTags = this.$mock.header.side_bar
		},
		toggleSideBar() {
			this.show = !this.show
			this.$set(this, 'show', this.show)
		},
		menuInit() {
			this.menuActive = -1
			this.menuTags = []
		},
		menuTagInit() {
			this.menuTagActive = -1
		},
		menuHandler(_index) {
			if (this.menuActive === _index) {
				return this.menuInit()
			}
			this.menuActive = _index
			this.menuTagInit()
			
			let menu = this.menus[_index]
			if (menu.type == 1 || menu.type == 2) {
				return
			}
			let fun = this.$http.getApiFun(this, menu.tagHander)
			fun(20).then(res => {
				this.menuTags = res.data
				for (let menuTag of this.menuTags) {
					menuTag['to'] = menu.tagTo
				}
			})
		},
		menuTagHandler(_index) {
			this.menuTagActive = _index
		},
		login() {
			this.menuInit()
		},
		logout() {
			this.menuInit()
			this.$store.dispatch('user/logout').then(data => {
				
			})
		}
	}
};
</script>

<style>
.ivu-drawer-body {
	padding: 0 !important;
}
</style>
<style lang="scss" scoped>
@import 'style/side-bar.scss';

.fade-tag-enter {
	opacity: 0;
	transform: translateY(0px);
}
.fade-tag-enter-active {
	transition: all 1s ease;
}
</style>
